<template>
    <div>
      <h2>学生管理 - 删除学生</h2>
      <ul>
        <li v - for="(student, index) in students" :key="index">
          姓名: {{ student.name }}, 性别: {{ student.gender }}, 年龄: {{ student.age }}, 邮箱: {{ student.email }}, 电话: {{ student.phone }}, QQ: {{ student.qq }}
          <button @click="deleteStudent(index)">删除</button>
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        students: [
          { name: '张三', gender: '男', age: 18, email: 'zhangsan@example.com', phone: '13821134666', qq: '123456789' },
          { name: '李四', gender: '女', age: 20, email: 'lisi@example.com', phone: '13434765987', qq: '987654321' }
        ]
      };
    },
    methods: {
      deleteStudent(index) {
        this.$confirm('确定要删除该学生吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.students.splice(index, 1);
          this.$message({
            type:'success',
            message: '学生删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  };
  </script>
  
  <style scoped>
  li {
    list-style-type: none;
    margin: 10px;
    padding:10px;
    border:1px solid #ccc;
    border-radius: 5px;
  }
  
  button {
    background-color: #ff4d4f;
    color:white;
    border:none;
    padding:5px 10px;
    border-radius:3px;
    cursor:pointer;
    margin-left:10px;
  }
  
  button:hover {
    background-color: #ff7072;
  }
  </style>